<template>
  <div>
    <div class="search">
      <div class="Toplist">
        <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
        <div class="input">
          <input type="text" placeholder="搜索歌曲、歌手、专辑" @input.stop="inputing" v-model.trim="keywords"
            @keyup.enter="enter" />
          <div v-if="keywords" class="clear" @click.stop="clear">&times;</div>
        </div>
      </div>
    </div>
    <!-- 动态添加组件 -->
    <component :is="componentName" :keywords="keywords" @first="first" @keyword="keyword" @searcHistory="searcHistory">
    </component>
  </div>
</template>

<script>
import SearchHot from "@/components/SearcHot.vue";
import SearchTips from "@/components/SearchTips.vue";
import SearchResult from "@/components/SearchResult.vue";
export default {
  name: "",
  components: {
    SearchHot,
    SearchTips,
    SearchResult,
  },
  data() {
    return {
      componentName: "SearchHot",
      keywords: "", //输入内容
    };
  },
  methods:{
    inputing() {
      if (this.keywords != "" || this.keywords.length > 0) {
        this.componentName = "SearchTips";
      }
    },
    //回车显示搜索结果
    enter() {
      if (this.keywords != "" || this.keywords.length > 0) {
        this.componentName = "SearchResult";
        // this.history.push(this.keywords)
      }
    },
    // 清空输入框内容
    clear() {
      this.keywords = "";
    },
    //点击热门热搜值
    first(data) {
      this.keywords = data;
      this.enter();
    },
    //点击搜索提示值
    keyword(data) {
      this.keywords = data;
      this.enter();
    },
    //点击历史搜索值
    searcHistory(data) {
      this.keywords = data;
      this.enter();
    },
  },
  watch: {
    keywords() {
      if (this.keywords == "") {
        this.componentName = "SearchHot";
      }
    },
  },
}
</script>

<style lang="scss" scoped>

.search {
  width: 100%;
  height: 100%;

  .Toplist {
    margin-top: 10px;
    display: flex;
    i {
      font-size: 25px;
      margin-left: 5px;
      color: #ccc;
    }

    .input {
      width: 80%;
      margin-left: 10px;
      border-bottom: 1px solid #ccc;
      display: flex;

      input {
        width: 280px;
        height: 30px;
        background: none;
        outline: none;
        border: none;
      }

      .clear {
        width: 30px;
        text-align: center;
        font-size: 26px;
        color: #ccc;
      }
    }
  }
}
</style>